<template>
  <div class="sms_content">
    <el-form :inline="true" ref="searchForm" :model="searchForm" >
      <el-form-item class="block-line">
        <el-tabs v-if="userInfo.characterId=='1'" v-model="searchForm.gid" type="card" @tab-click="submitForm">
          <el-tab-pane v-for="item,n in groups" :label="item.groupName" :name="item.groupId.toString()" :key="n.toString()"></el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item class="block-line">
        <el-row>
          <el-col :span="24">
            <el-date-picker
              class="mgr10"
              :unlink-panels="true"
              :default-time="['00:00:00', '23:59:59']"
              v-model="dateRanges"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange">
            </el-date-picker>
            <el-input class="mgr10" v-model="searchForm.title" placeholder="输入标题关键字搜索" @keyup.enter.native="submitForm" style="width: 360px;"></el-input>
            <el-button type="primary" @click="submitForm">搜索</el-button>
            <el-button type="primary" class="fr" @click="$router.push({name: 'ContentTypeWx'})">内容性质管理</el-button>
          </el-col>
        </el-row>
        <!--<el-col :span="8">-->
          <!--<el-input v-model="searchForm.title" placeholder="输入标题关键字搜索" @keyup.enter.native="submitForm"></el-input>-->
        <!--</el-col>-->
        <!--<el-col :span="3"><el-button style="margin-left:10px" type="primary" @click="submitForm">搜索</el-button></el-col>-->
        <!--<el-button type="primary" class="fr" @click="$router.push({name: 'ContentTypeWx'})">内容性质管理</el-button>-->
      </el-form-item>
      <el-form-item label="内容性质：">
        <el-select v-model="searchForm.attrId" placeholder="不限" clearable>
          <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="tb-head">
      <router-link :to="{name: 'EditSms', params: {id: 'add'}}"><el-button icon="plus">新建内容</el-button></router-link>
    </div>
    <el-table ref="multipleTable" v-loading="tbLoading" element-loading-text="拼命加载中" :data="smsList.list" stripe class="table" :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column label="标题" width="" prop="title" width="300">
        <template slot-scope="scope">
          <el-popover placement="right" :title="scope.row.title" width="240" trigger="hover" :content="filterHtmlTags(scope.row.content)">
            <div class="sms-title" slot="reference">
              {{scope.row.title}}
              <div class="sms-hot" v-if="scope.row.top==1">顶</div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="内容性质">
        <template slot-scope="scope">
          {{attribute(scope.row.attrId)}}
        </template>
      </el-table-column>
      <el-table-column label="查看权限" width="140">
        <template slot-scope="scope">
          <div v-if="scope.row.groupType==1 && scope.row.commonType==1">事业部，公共</div>
          <div v-else-if="scope.row.groupType==0 && scope.row.commonType==0">{{authStatus[0]}}</div>
          <div v-else-if="scope.row.groupType==1 && scope.row.commonType==0">{{authStatus[1]}}</div>
          <div v-else-if="scope.row.groupType==0 && scope.row.commonType==1">{{authStatus[2]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建人" width="120">
        <template slot-scope="scope">
          {{scope.row.author}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100"  class-name="is-center sms-opra">
        <template slot-scope='scope'>
          <el-button type='text' @click="copyToMycont(scope.row.id)">复制</el-button>
          <!-- <el-button type='text' @click="dialogNewSendBtn(scope.row.id, scope.row.title)">群发</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="searchForm.page"
        :page-size.sync="searchForm.size"
        layout="sizes, total, prev, pager, next, jumper"
        :total="smsList.page.total"
        :page-sizes="[10, 30, 50, 100]"
        @current-change="submitForm('searchForm')"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <new-send :show.sync="dialogNewSend" :newSendData.sync="newSendItem" ref="sendset"></new-send>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import newSend from '@/components/common/content/newSend'
  export default {
    data () {
      return {
        searchForm: {
          title: '',
          attrId: 2,
          procStatus: '',
          page: 1,
          size: 10,
          authStatus: 2,
          groupType: '',
          commonType: ''
        },
        procStatus: ['全部', '未提交', '待审核', '未发送', '已发送'],
        authStatus: ['仅自己可见', '事业部', '公共'],
        multipleSelection: [],
        icon: null,
        tbLoading: true,
        dialogNewSend: false,
        newSendItem: {
          title: '',
          id: '',
          type: 3
        },
        dateRanges: []
      }
    },
    components: {
      newSend
    },
    mounted () {
      this.autoFillDate()
      this.initPage()
    },
    computed: {
      ...mapState({
        smsList: state => state.contentManage.smsNewsList,
        groups: state => state.groupMenu,
        userInfo: state => state.userInfo,
        attrs: state => state.contentManage.contentType
      })
    },
    methods: {
      ...mapActions(['getSmsNewsList', 'editSms', 'getSmsDetail', 'getGroupMenu', 'getContentTypes']),
      async initPage () {
        await this.getGroupMenu()
        this.searchForm.gid = this.groups[0].groupId.toString()
        this.getContentTypes().then(() => this.submitForm())
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 去除html标签
      filterHtmlTags (html) {
        return html.replace(/<\/?.+?>/g, '').replace(/ /g, '')
      },
      attribute (id) {
        let attrName
        Object.values(this.attrs).forEach((key, value) => {
          if (key.id === id) {
            attrName = key.name
          }
        })
        return attrName
      },
      // 提交搜索
      submitForm () {
        const flag = this.dateRanges && this.dateRanges.length > 1
        const dateStart = flag ? Math.floor(this.dateRanges[0].getTime() / 1000) : ''
        const dateEnd = flag ? Math.floor(this.dateRanges[1].getTime() / 1000) : ''
        const rules = Object.assign({...this.searchForm}, {
          startTime: dateStart,
          endTime: dateEnd
        })
        this.getSmsNewsList(rules)
          .finally((res) => { this.tbLoading = false })
      },
      // 更改每页条数
      handleSizeChange (size) {
        this.searchForm.size = size
        this.submitForm()
      },
      // 群发送设置
      dialogNewSendBtn (id, title) {
        this.dialogNewSend = true
        this.newSendItem.title = title
        this.newSendItem.id = id
        this.$refs.sendset.getSendRecord(id)
      },
      // 复制到我的内容
      copyToMycont (id) {
        this.$confirm('确定复制该条内容到我的内容？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          console.log(id)
          this.getSmsDetail(id)
          .then((res) => {
            let dat = res.data.data
            console.log(res.data)
            this.editSms({
              title: dat.title,
              content: dat.content,
              attrId: dat.attrId,
              groupType: 0,
              commonType: 0
            }).then(() => {
              this.$alert('复制成功!您可以去"我的内容"->"短信"下查看', '提示', {
                confirmButtonText: '确定'
              })
            })
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      },
      // 自动设置默认日期
      autoFillDate() {
        const dateStart = new Date()
        const dateEnd = new Date()
        dateStart.setDate(1)
        dateStart.setHours(0, 0, 0, 0)
        dateEnd.setHours(23, 59, 59, 999)
        this.dateRanges = [dateStart, dateEnd]
      },
      // 根据日期筛选
      dateChange(value) {
        this.dateRanges = value
      },
    }
  }
</script>
<style lang="scss">
  .sms_content{
    .block-line{display:block;width:100%;}
    .block-line .el-form-item__content{display: block;}
    .avatar{margin-right:3px;width:32px;height:32px;border-radius:50%;vertical-align:middle;}
    .pagination{margin-top:16px;}
    .el-pagination{text-align:right;}
    .el-pagination__sizes{float:left;}
    .el-dropdown-menu{width:180px}
  }
  .tb-head a{margin-right: 10px;}
  // .el-button{min-width: 88px;}
  .sms{
    &-title{display: inline-block; cursor: pointer;}
    &-hot{display: inline-block; background: #ff0000; font-size: 10px;width: 14px;height: 14px;line-height: 13px; text-align: center; color: #fff; float: right; margin-left: 10px;}
  }
  .newsend{
    &-tip{
      background: #f3f3f3;
      padding: 10px 10px 30px;
      margin: -10px auto 15px;
    }
    &-time{
      width: 100%;
    }
  }
  .condition-wrap{
    width: 100%;
    > div{
      width: 100%;
    }
  }
  .el-popover{
    word-wrap: break-word;
    word-break: break-all;
  }
  .newsend-btn{
    text-align: center;
  }
  .dialog-footer{
    text-align: left;
    padding: 15px 0 20px;;
    border-top: 1px dashed #dedede;
  }
  .send-record-table{
    margin-top: 10px;
  }
</style>
